<template>
	<!-- 单料评吸历史记录 -->
	<view class="com_view">
		<scroll-view scroll-x="true" scroll-y="true" class="scroll_box">
			<view class="scroll_content">
				<!-- 表头 -->
				<view class="table_header">
					<view class="header_cell" v-for="header in tableHeader" :key="header.title" 
					:style="`--childer-num:${header.num}`" :class="header.class + ' ' + header.bg">
						<text>{{ header.title }}</text>
						<view class="header_childers">
							<view class="header_childer" v-for="child in header.childer" :key="child.title">
								<text> {{ child.title }} </text>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 表格内容 -->
				<view class="table_content">
					<view class="table_row" v-for="row in tableData" :key="row.id">
						<view class="table_cell" v-for="item in tableKey" :key="item.title"
						:class="item.class">
						
						<!-- <view class="custom-header-line-1" v-if="item.isHeader"
						@click="$showFill(row[item.key], item.isHeader)">
							<text>{{ row[item.key] }}</text>
						</view> -->
						<text>{{ row[item.key] }}</text>
						
						<!-- <text>{{ row[item.key] }}</text> -->
							<!-- <text v-if="item.type==='text'">{{ row[item.key] }}</text>
							
							<text v-else>{{ row.meetingUnblendedCorrelationRep[item.key] }}</text> -->
								
						</view>
					</view>
				</view>
				
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const Header = [
		{ title: '编号', childer: [], num: 1, class: 'no_class', bg: 'no_bg' },
		{ title: '年份、产地、等级', childer: [], num: 1, class: 'year_class', bg: 'name_bg' },
		{ title: '香气指标', childer: [ { title: '香型' },{ title: '香气质' },{ title: '香气量' } ], num: 3  },
		{ title: '烟气指标', childer: [{ title: '浓度' },{ title: '柔细度' },{ title: '余味' }], num: 3  },
		{ title: '控制指标', childer: [{ title: '杂气' },{ title: '刺激性' },{ title: '劲头' }], num: 3  },
		{ title: '燃烧性', childer: [], num: 1  },
		{ title: '灰色', childer: [], num: 1  },
		{ title: '总计', childer: [], num: 1 },
		{ title: '突出特点', childer: [], num: 1, class: 'w_plus'  },
		{ title: '用途', childer: [], num: 1, class: 'w_plus'  },
		{ title: '备注', childer: [], num: 1, class: 'w_plus'  },
	]
	
	const HeaderDict = [
		{ title:'编号', key:'number', type: 'text',isHeader:true, class: 'no_class'},
		{ title:'年份、产地、等级', key:'smokeName', isHeader:true, type: 'text', class: 'year_class'},
		{ title:'香型', key:'aromaFlavor', type: 'input'},
		{ title:'香气质', key:'aromaQuality', type: 'input', require: true},
		{ title:'香气量', key:'aromaVolume', type: 'input', require: true},
		{ title:'浓度', key:'density', type: 'input', require: true},
		{ title:'柔细度', key:'fineness', type: 'input', require: true},
		{ title:'余味', key:'aftertaste', type: 'input', require: true},
		{ title:'杂气', key:'impure', type: 'input', require: true},
		{ title:'刺激性', key:'thrill', type: 'input', require: true},
		{ title:'劲头', key:'energy', type: 'input', require: true},
		{ title:'燃烧性', key:'combustibility', type: 'input', require: true},
		{ title:'灰色', key:'soot', type: 'input', require: true},
		{ title:'总计', key:'total', type: 'input', require: true},
		{ title:'突出特点', key:'characteristic', type: 'input', class: 'w_plus' },
		{ title:'用途', key:'purpose', type: 'input', class: 'w_plus' },
		{ title:'备注', key:'remarks', type: 'input', class: 'w_plus' },
	]
	export default {
		name: 'singleHistory',
		props: {
			already: { //是否已经提交过了
				type: Boolean,
				default: false,
			},
			tableData: {
				type: Array,
				default: function () { return [] }
			}
		},
		computed: {
			// 表头的上级
			tableHeader() { return Header },
			// 表头的字典项
			tableKey() { return  HeaderDict },
		},
		data() {
			return { }
		}
	}
</script>

<style scoped lang="scss">
	.com_view {
		width: 100%;
		// flex: 1;
		height: 600px;
		padding: 20px;
		padding-top: 0;
		--def-cell-width: 100px;
		--def-table-bg: rgb(245, 247, 250);
		--def-border-color: #ddd;
	}
	.submit-line {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 20px;
		.btn {
			width: 100px;
			background-color: #16b777;
		}
	}
	.scroll_box {
		width: 100%;
		// height: 100%;
		height: calc(100% - 50px);
		.scroll_content {
			min-width: 100%;
			min-height: 100%;
			position: relative;
			width: max-content;
			background-color: var(--def-table-bg);
			.no_class {
				width: 100px;
				position: sticky;
				z-index: 2;
				left: 1px;
				background-color: var(--def-table-bg);
			}
			.year_class {
				// width: 170px;
				width: 280px;
				position: sticky;
				z-index: 2;
				left: 100px;
				background-color: var(--def-table-bg);
			}
			.no_bg {
				background-image: url(@/static/Maskgroup.png);
			}
			.name_bg {
				background-image: url(@/static/Maskgroup.png);
				background-position: -30px 0px;
			}
			.w_plus {
				width: 250px;
			}
		}
	}
	.table_header {
		display: flex;
		align-items: center;
		width: max-content;
		background-image: url(@/static/Maskgroup.png);
		position: sticky;
		top: 0;
		z-index: 3;
		border-bottom: 1px solid var(--def-border-color);
		border-left: 1px solid var(--def-border-color);
		.header_cell {
			flex-shrink: 0;
			height: 100px;
			line-height: 50px;
			width: calc(var(--childer-num) * var(--def-cell-width));
			border-right: 1px solid var(--def-border-color);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.header_childers {
			display: flex;
			align-items: center;
			border-top: 1px solid var(--def-border-color);
			.header_childer {
				height: 50px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: var(--def-cell-width);
				border-right: 1px solid var(--def-border-color);
			}
		}
	}
	
	.table_content {
		width: max-content;
		min-width: 100%;
		background-color: rgb(245, 247, 250);
		.table_row {
			width: max-content;
			min-width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--def-border-color);
			border-left: 1px solid var(--def-border-color);
		}
		.table_cell {
			width: var(--def-cell-width);
			height: 50px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-right: 1px solid var(--def-border-color);
		}
	}
</style>